<template>
<div class="ui_editorder" style="padding-top:46px">
  <van-nav-bar title="编辑订单" left-arrow fixed>
    <van-icon name="arrow-left" slot="left" color="#333" @click="backSave"> 反回并保存</van-icon>
    <span style="color: #333;" slot="right">客服</span>
  </van-nav-bar>
  <!-- 拍照区域 -->
  <div class="order_content_photo">
    <div class="order_content_txt">拍照</div>
    <div class="order_content_pic">
        <i class="iconfont icon-tupian"></i>
        <span>添加图片</span>
    </div>
  </div>
  <!-- 废品信息 -->
  <div class="order_content_box"  v-for="item in orderlist" :key="item.id" >
    <div class="order_content_box_title">废品{{item.count}}</div>
    <div class="order_content_box_text">
      <div class="order_content_box_text1">
        <span></span>
        <span @click="showText">
          <input style="color:#999;" value="a" v-model="item.subjectName">（公斤）&nbsp;&nbsp; 
          <i class="iconfont icon-unie61f"></i>
        </span>
      </div>
      <div class="order_content_box_text1">
        <span>单价</span>
        <span class="s1">
          <input type="text" value="1" v-model="item.price">
          <span>{{item.unit}}</span>
        </span> 
      </div>
      <div class="order_content_box_text1">
        <span>重量</span>
        <span class="s1">
          <input type="text" value="1500">
          <span>公斤</span>
        </span>
      </div>
      <div class="order_content_box_text2">共计： 1000.00元</div>
    </div>
  </div>
  <!-- 废品信息 增加按钮 -->
  <div class="add" @click="add">
    <div class="add_d1">+</div>
    <div class="add_text">增加</div>
  </div>
  <!-- 底部金额结算-->
  <div class="price">
    <div class="price_money">
      <span class="s1">总计金额</span>
      <span class="s2">￥88.00</span>
    </div>
    <div class="price_cash">
      <p class="p1">现金支付</p>
      <p class="p2" @click="showCash">线上支付</p>
    </div>
  </div>
  <!-- 废品信息种类选择弹出层 -->
  <div v-show="showChoose"  title="请选择" class="popdiv">
    <div class="d1">
      <div>请选择</div>
      <i class="iconfont icon-guanbi" @click="showText" ></i>
    </div>
    <ul v-for="(item,index) in list" :key="item.id" 
      @click="changeType(index)" 
      :class="index===active ?'active':''">
        <li>
          <span>{{item.name}}&nbsp;&nbsp;</span>
          <span v-if="index === active"><i class="iconfont icon-dagou"></i></span> 
        </li>
    </ul>
  </div>
  <!-- 线上支付弹出框 -->
  <div class="showmoney_box">
    <van-actionsheet v-model="showMoney">
      <!-- 文字区 关闭按钮 -->
      <div class="showmoney_box_d1">
        <span class="showmoney_box_s1">请输入支付密码</span>
        <i class="iconfont icon-guanbi1" @click="showMoney=false"></i>
      </div> 
      <!-- 数字键盘密码 -->     
      <van-password-input
        :value="value"
        @focus="showKeyboard = true"
      />
      <div style="text-align:right;color:#4694ff;padding:20px;">忘记密码</div>
      <!-- 密码输入框 -->
      <van-number-keyboard
          :show="showKeyboard"
          @input="onInput"
          @delete="onDelete"
          @blur="showKeyboard = true"
      />
  </van-actionsheet>
  </div>   
</div>  
</template>
<script>
import { getOrderDetail } from 'services/order';
export default {
  name: "editorder",
  data() {
    return{
      showMoney:false,
      showChoose:false,
      active: 0,
      value: '',
      showKeyboard: true,
      orderlist:[],
      list:[
        {name:'纸类'},
        {name:'电器'},
        {name:'塑料'},
        {name:'金属'},
        {name:'玻璃'},
      ]
    }
  },
  created() {
    this.getOrderDetail();
  },
  methods: {
    backSave() {
      this.$router.go(-1);
    },
    getOrderDetail(){
      const { orderNo } = this.$route.params;
      getOrderDetail({ orderNo }).then(response => {
        // this.orderlist = response.object;
        const { object } = response;
        this.orderlist = object.flowerUserPollenOrder.categoryDataJsonArray;
        console.log(this.orderlist)
      })
    },
    showText() {  //选择种类弹出层
      this.showChoose = !this.showChoose;
    },
    changeType(index) { //选择种类内容
      this.active = index;
    },
    showCash(){
      this.showMoney = !this.showMoney;
      //金额不足弹出框
      // this.$dialog.confirm({
      //   message: '<div style="text-align:center;margin:0 auto;font-size:16px;color:#333;">很抱歉，您的账户余额不足，请前往充值在进行支付订单</div>',
      //   confirmButtonText:'前往充值',
      // }).then(() => {
      //   // on confirm
      // }).catch(() => {
      // // on cancel
      // });
    },
    onInput(key) {
      this.value = (this.value + key).slice(0, 6);
    },
    onDelete() {
      this.value = this.value.slice(0, this.value.length - 1);
    },
    add(){
      const a=[];
      this.orderlist.push(a);
    }
  }
};
</script>
<style lang="less">
.ui_editorder {
  width:100%; 
  padding-bottom: 180px;
  // 拍照区域
  .order_content_photo {
    padding: 30px;
    width: 100%;
    height: 290px;
    background: #fff;
    margin-top: 20px;
    .order_content_txt {
      color: #333;
      font-size: 28px;
    }
    .order_content_pic {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      width: 160px;
      height: 160px;
      border: 1px dashed #e1e1e1;
      margin-right: 30px;
      margin-top: 30px;
      text-align: center;
      color: #999;
      .iconfont {
        font-size: 50px;
      }
    }
  }
  //废品信息
  .order_content_box{
    width:100%;
    min-height:100px;
    background:#fff;
    margin-top:30px;
    .order_content_box_title{
      font-size:30px;
      color:#333;
      padding-left:30px;
      height:70px;
      line-height: 70px;
      border-bottom: 1px solid #e1e1e1;
    }
    .order_content_box_text{
      padding:30px;
      font-size:28px;
      color:#333;
      .order_content_box_text1{
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #e1e1e1;
        height:80px;
        align-items: center;
        .s1{
          width:38%
        }
        input{
          border:none;
          text-align:left;
          color:#999;
          width:170px;
          
        }
      }
      .order_content_box_text2{
        text-align: right;
        height:50px;
        line-height: 80px; 
      }
    }
  }
  //废品信息 增加按钮
  .add{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top:30px;
    .add_d1{
      width:130px;
      height:130px;
      border-radius: 50%;
      background: #fff;
      text-align: center;
      margin:0 auto;
      line-height: 130px;
      font-size:46px;
      color:#ff8f22;
    }
    .add_text{
      color:#ff8f22;
      font-size:28px; 
      margin-top:15px;
    }
  }
  //金额结算
  .price{
    display: flex;
    justify-content: space-between;
    padding:30px;
    background: #fff;
    position: fixed;
    bottom:0;
    width:100%;
    align-items: center;
    .price_money{
      font-size:28px;
      .s2{
        color:#f87187;
        font-weight: bold;
      }
    }
    .price_cash{
       display: flex;
      .p1,.p2{
        width:209px;
        margin:0;
        text-align: center;
        height:80px;
        line-height: 80px;
        color:#fff;
        font-size:32px;
      }
      .p1{
        border-top-left-radius: 50px;
        border-bottom-left-radius: 50px;
        background:#f7a427;        
      }
      .p2{
        border-top-right-radius: 50px;
        border-bottom-right-radius: 50px;
        background:#ff8f22;    
      }
    }
  }
  //废品信息种类选择弹出层
  .popdiv{
    width:100%;
    height:40%;
    background: #fff;
    position: fixed;
    bottom:0px;
    padding:30px;
    border-top:1px solid #999;
    .d1{
      display:flex;
      justify-content: space-between;
    }
    li{
      padding-top:15px;
      font-size:28px;
    }
    .active{
      color:#f7a427;
    }
  }
  .van-actionsheet__header{
    text-align: left;
    padding-left:30px;
    color: #f7a427;
  }
  .van-actionsheet__content{
    height:500px;
    padding-left:30px;
    li{
      padding-top:15px;
      font-size:28px;
    }
    .active{
      color:#f7a427;
    }
  }
  //线上支付弹出框 文字区 关闭按钮
  .showmoney_box{
    .showmoney_box_d1{
      text-align: right;
      font-size:32px;
      margin:20px auto;
      padding-bottom: 40px;
      padding-right:30px;
      .showmoney_box_s1{
        margin-right:200px;
      }
    }
  }
}
//弹出框按钮文字颜色 大小
.van-button--default,.van-dialog__confirm{
  color:#1796ff;
  font-size:36px;
}
.van-actionsheet{
  width:100%;
  height:760px;
}

</style>
